<template>
	<view class="square" :style="`--i:${index}`" v-for="(item,index) in 5" :key="index"></view>
</template>

<script>
</script>

<style scoped lang="scss">
	.square {
		position: absolute;
		width: 100px;
		height: 100px;
		background: rgba(255, 255, 255, .1);
		backdrop-filter: blur(5px);
		box-shadow: 0 25px 45px rgba(0, 0, 0, .1);
		border: 1px solid rgba(255, 255, 255, .5);
		border-right: 1px solid rgba(255, 255, 255, .2);
		border-bottom: 1px solid rgba(255, 255, 255, .2);
		border-radius: 10px;
		animation: animate 7s linear infinite;
		animation-delay: calc(-1s*var(--i));
		z-index: 9;

		&:nth-child(1) {
			top: -260px;
			right: -230px;
			width: 100px;
			height: 100px;
		}

		&:nth-child(2) {
			top: -270px;
			left: -130px;
			width: 30px;
			height: 30px;
		}

		&:nth-child(3) {
			bottom: 0px;
			right: 160px;
			width: 50px;
			height: 50px;
		}

		&:nth-child(4) {
			top: 190px;
			left: -220px;
			width: 80px;
			height: 80px;
		}

		&:nth-child(5) {
			bottom: -180px;
			left: 160px;
			width: 60px;
			height: 60px;
		}
	}

	@keyframes animate {

		0%,
		100% {
			transform: translateY(-40px);
		}

		50% {
			transform: translateY(40px);
		}
	}
</style>